<template>
<div>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/website/config'}">网站管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户反馈</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 条件查询   -->
  <el-form :inline="true" :model="query" size="mini" >

    <el-form-item label="反馈类型:">
      <el-select v-model="query.type" clearable filterable style="width:120px;">
        <el-option label="需求" value="1"></el-option>
        <el-option label="缺陷" value="2"></el-option>
        <el-option label="优化" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="是否处理:">
      <el-select v-model="query.isHandle" clearable filterable style="width:120px;">
        <el-option label="已处理" value="1"></el-option>
        <el-option label="未处理" value="0"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button icon="el-icon-search" type="primary" @click="fetchData">查询</el-button>
      <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
    </el-form-item>
  </el-form>

  <!--  列表数据  -->
  <el-table :data="list" border style="width: 100%" stripe>
    <el-table-column align="center" label="序号" width="60" type="index"></el-table-column>
    <el-table-column align="center" prop="userName" label="操作用户" width="200"></el-table-column>
    <el-table-column align="center" prop="type" label="反馈类型" width="150">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.type === 1">需求</el-tag>
        <el-tag type="danger" v-if="scope.row.type === 2">缺陷</el-tag>
        <el-tag type="primary" v-if="scope.row.type === 3">优化</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="isHandle" label="是否处理" width="150">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.isHandle === 1">已处理</el-tag>
        <el-tag type="danger" v-if="scope.row.isHandle === 0">未处理</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="email" label="邮箱" width="180" ></el-table-column>
    <el-table-column align="center" prop="demand" label="需求" width="180" ></el-table-column>
    <el-table-column align="center" prop="demandDesc" label="需求简述" width="180" ></el-table-column>
    <el-table-column align="center" prop="createTime" label="创建时间" width="180">
      <template slot-scope="scope">
        <!-- 格式化日期 -->
        {{getFormat(scope.row.createTime)}}
      </template>
    </el-table-column>

    <el-table-column  align="center" label="操作">
      <template slot-scope="scope">
        <el-button v-if="scope.row.isHandle === 0" icon="el-icon-edit" type="primary" size="mini" @click="handleOpinion(scope.row.id, scope.row.demand)">处理</el-button>
        <el-button icon="el-icon-document-delete" type="danger" size="mini" @click="handleDel(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div class="block" style="margin-top: 10px;">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.current"
      :page-size="query.size"
      background
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>

  <el-dialog title="用户反馈处理" :visible.sync="visiable" width="40%" :before-close="handleClose">
    <el-form ref="formData" :model="formData" label-width="100px"  >
      <el-form-item label="描述:">
        <el-input v-model="demand" disabled></el-input>
      </el-form-item>
      <el-form-item label="处理结果:">
        <el-radio-group v-model="handle.handleResult">
          <el-radio :label="1">同意</el-radio>
          <el-radio :label="0">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="驳回原因:" v-if="handle.handleResult === 0">
        <el-input v-model="handle.rejectReason" type="textarea" :rows="2" ></el-input>
      </el-form-item>
      <el-form-item label="处理描述:" v-if="handle.handleResult === 1">
        <el-input v-model="handle.handleDesc" type="textarea" :rows="2" ></el-input>
      </el-form-item>
      <el-form-item label="邮件通知:">
        <el-radio-group v-model="handle.isNotice">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="submit('formData')" >确认</el-button>
        <el-button type="danger"  @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</div>
</template>

<script>
import {dateFormat} from "@/utils/date";
import api from '@/api/user';
import { updatePassword } from '../../../../blog-web/src/api';
export default {
    data() {
        return {
            query: {
                current: 1,
                size: 10,
                type: null,
                isHandle: null,
                dateRange: null
                
            },
            demand: '',
            list: {},
            handle: {},
            total: 0,
            visiable: false,
            id: null
        }
    },

    methods: {
      // 查询用户反馈意见信息
      fetchData() {
        api.getOpinion(this.query).then(res => {
          if (res.code === 200) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
      },

      // 提交用户反馈信息
      submit() {
        api.updateOpinion(this.handle).then(res => {
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: '处理成功',
              type: 'success',
              duration: 1500
            });
          } else if (res.code === 306) {
            this.$notify.error({
              title: '错误',
              message: '您没有操作权限，请联系管理员',
              duration: 1500
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '系统异常，请稍后再试',
              duration: 1500
            });
          }
          this.handleClose();
          this.fetchData();
        })
      },

      // 处理用户反馈信息
      handleOpinion(id, demand) {
        this.handle.id = id;
        this.visiable = true;
        this.demand = demand;
      },

      // 删除用户反馈信息
      handleDel(id) {
        this.$confirm('确认删除这条记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送删除请求
          api.deleteOpinion(id).then(response => {
            if (response.code === 200) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 1500
              });
            } else if (response.code === 306) {
              this.$notify.error({
                title: '错误',
                message: '您没有操作权限，请联系管理员',
                duration: 1500
              });
            } else {
              this.$notify.error({
                title: '错误',
                message: '系统异常，请稍后再试',
                duration: 1500
              });
            }
            // 刷新列表
            this.fetchData();
          })
        }).catch(() => {
          // 取消删除
        });
      },

      // 关闭用户反馈信息处理弹框
      handleClose() {
        this.visiable = false;
        this.handle = {};
      },

      // 重新加载
      reload() {
        this.query.current = 1;
        this.query.size = 10;
        this.query.type = null;
        this.query.isHandle = null;
        this.fetchData();
      },

      // 格式化日期
      getFormat(date){
        return dateFormat(date);
      },

      // val 是切换之后的每页显示多少条
      handleSizeChange(val) {
        this.query.size = val;
        this.fetchData();
      },

      // 当页码改变后触发此方法 val是当前点击（或输入）的页码
      handleCurrentChange(val) {
        this.query.current = val;
        this.fetchData();
      },
    },

    created() {
      this.fetchData();
    }
}
</script>

<style scoped>
.handleBtn {
    margin-left: 20px;
}
</style>